<template>
  <div id="app">
    <el-row type="flex" class="row-bg" justify="center">
      <el-col :span="6" :lg="7" :xl="6">
        <h1>欢迎来到东大星问卷系统</h1>
        <el-image :src="require('@/assets/images/logo.png')" style="width: 175px; height: 210px; margin: 0"></el-image>
      </el-col>
      <el-col :span="1">
        <el-divider direction="vertical"></el-divider>
      </el-col>

      <el-col :span="6">
        <el-form :model="RegisterForm" :rules="rules" ref="RegisterForm">

          <h2 style="margin-left: -75%;margin-bottom:-5% ">
            <font size="6px">注册</font>
          </h2>

          <el-form style="margin-bottom: 3%;">
            <router-link to="/login" style="margin-left: 60%;">
              <font size="3px">已有帐号？点我登录</font>
            </router-link>
          </el-form>

          <el-form ref="getCodeForm" :rules="getCoderules" :model="getCodeForm">

            <el-form-item prop="tel" style="margin-bottom:5%">
              <el-input v-model="getCodeForm.tel" style="width:90%" placeholder="请输入手机号"></el-input>
            </el-form-item>
          </el-form>
          <el-form-item prop="code" style="margin-bottom:5%">
            <el-input v-model="RegisterForm.code" class="code" style="width:58% ;margin-left:5%;float:left"
              placeholder="请输入验证码"></el-input>
            <el-button type="primary" v-show="show" @click="getCode('getCodeForm')" style="margin-left: -5%">获取验证码
            </el-button>
            <el-button type="primary" v-show="!show" disabled style="width:32%;margin-left: -5%"> {{ count }} s
            </el-button>

          </el-form-item>



          <el-form-item prop="name" style="margin-bottom:5%" >
            <el-input v-model="RegisterForm.name" style="width:58% ;margin-left:5%;float:left" placeholder="请输入用户名"></el-input>

            <el-select v-model="level" placeholder="角色选择" style="width:32%;margin-left: -5%">
              <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
              </el-option>
            </el-select>

          </el-form-item>
          <el-form-item prop="password1" style="margin-bottom:5%">
            <el-input v-model="RegisterForm.password1" style="width:90%" placeholder="请输入密码" show-password></el-input>
          </el-form-item>
          <el-form-item prop="password2" style="margin-bottom: 5%">
            <el-input v-model="RegisterForm.password2" style="width:90%" placeholder="请确认密码" show-password></el-input>
          </el-form-item>

          <el-form-item>
            <el-button type="primary" style="width:90%" @click="submitForm('RegisterForm')">立即注册</el-button>

          </el-form-item>

        </el-form>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: "Register",
  // el:'.register-pannel',

  data() {
    return {

      show: true,
      timer: null,
      count: '',

      RegisterForm: {
        name: "",
        password1: "",
        password2: "",
        tel: "",
        code: "",
      },

      getCodeForm: {
        tel: '',
      },

      getCoderules: {
        tel: [
          { required: true, message: '请输入手机号码', trigger: 'blur' },
          { min: 11, max: 11, message: '长度为 11 位数字', trigger: 'blur' }
        ],
      },

      rules: {
        name: [{ required: true, message: "请输入用户名", trigger: "blur" }],
        password1: [
          { required: true, message: "请输入密码", trigger: "change" },
        ],
        password2: [
          { required: true, message: "请输入确认密码", trigger: "change" },
          {
            required: true,
            validator: (rule, value, callback) => {
              if (this.RegisterForm.password2 === "") {
                callback(new Error("请再次输入密码"));
              } else if (
                this.RegisterForm.password2 != this.RegisterForm.password1
              ) {
                callback(new Error("两次输入密码不一致!"));
              } else {
                callback();
              }
            },
            trigger: "blur",
          },
        ],
        tel: [
          { required: true, message: "请输入电话", trigger: "blur" },
          { min: 11, max: 11, message: "长度为 11 位数字", trigger: "blur" },
        ],
        code: [
          { required: true, message: "请输入验证码", trigger: "blur" },
        ],
      },
      options: [{
          value: '2',
          label: '租户'
        },{
          value: '4',
          label: '用户'
        }],
        level: ''
    };
  },

  methods: {
    submitForm(formName) {
      console.log("aaabbbb")
      this.$refs[formName].validate(async (valid) => {
        if (!valid) {
          return;
        }
        console.log("1111111")
        await this.$http({
          method: "post",
          url: "/signIn",
          data: {
            level: this.level,
            name: this.RegisterForm.name,
            passwd: this.RegisterForm.password1,
            tel: this.RegisterForm.tel,
            code: this.RegisterForm.code
          }
        }).then((response) => {
          console.log("aaaa")
          //访问后端
          const res = response.data;

          if (res.code == "666") {
            //注册成功
            this.$message.success(res.message);
            this.$router.push("/login");
          } else {
            this.$message.error(res.message);
            //访问失败
          }
        })
          .catch((error) => {
            // 【务必注意】这里的error输出的不是一个对象【error.response才是一个对象】
            // console.log(error);
            if (error.response) {
              // 请求已发出，但服务器响应的状态码不在 2xx 范围内
              console.log(error.response.data);
              console.log(error.response.status);
              console.log(error.response.headers);
            } else {
              // Something happened in setting up the request that triggered an Error
              console.log("请求未发出", error.message);
            }
          });
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },

    // 获取验证码函数
    async getCode(formName) {
      this.RegisterForm.tel = this.getCodeForm.tel
      this.$refs[formName].validate(async (valid) => {

        if (!valid) {
          return
        }
        this.getCodeSecond()
        await this.$http({
          method: "get",
          url: "/getCode",

          params: { tel: this.RegisterForm.tel },

        }).then((response) => {
          console.log("555543")
          console.log(response.data)
          console.log("7777777");

          const res = response.data;
          if (res.code == "666") {
            console.log("666");
          }
          else {

          }
        });
      })
    },

    getCodeSecond() {
      this.show = false;
      const TIME_COUNT = 60;
      if (!this.timer) {
        this.count = TIME_COUNT;
        this.show = false;
        this.timer = setInterval(() => {
          if (this.count > 0 && this.count <= TIME_COUNT) {
            this.count--;
          } else {
            this.show = true;
            clearInterval(this.timer);
            this.timer = null;
          }
        }, 1000)
      }
    }
  },
};
</script>

<style scoped>
.el-row {
  height: 100vh;
  display: flex;
  align-items: center;
}

.el-divider {
  height: 200px;
}

#app {
  background-image: url("@/assets/images/background.jpg");
  width: 100%;
  height: 100%;
  position: fixed;
  background-size: 100% 100%;

  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin: 0;
}
</style>